<template>
    <div class="home">
      <div class="header">
        <a @click="goback"><span class="angle"></span><span>返回</span></a>
        <span>发公告</span>
        <span @click="publish">发布</span>
      </div>
      <div class="content">
        <div class="sendRange" @click="sendRangeClick">
            <div>发送范围</div>
            <div>
                <span class="numPeople">{{number}}</span>人(部门)
                <span class="smallAngle"></span>
            </div>
        </div>
        <p>添加封面图片</p>
        <div class="imgBox">
            <label for="uploadimg">
                <img :src="defaultImg_1" alt="">
            </label>
            <input type="file" accept="image/jpg,image/jpeg,image/png" id="uploadimg" @change="onFileChange">
        </div>
      </div>
      
      <!-- 提示信息 -->
      <div class="tip" v-show="isTip">
        <p>{{tipMessage}}</p>
      </div>
      <!--退出弹出框-->
      <div class="delPopup" v-show="isShowdel">
          <transition name="slide-fade">
              <div class="delContent">
                  <v-tipBox @ok="okClick" :name="titlenameVal"></v-tipBox>
              </div>
          </transition>
      </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
import { Indicator } from 'mint-ui';
import tipBox from "./cModule/notnull";
export default {
  data() {
    return {
      tipMessage: "服务器错误", //提示信息内容
      isTip: false, //提示信息是否出现
      oid: "7274e24d5deb444fb973b7dd18d7cca2",
      uid: "aeb5e154962341438c02ab5f62601982",
      isShowdel: false, //删除提示框是否出现
      titlenameVal: "联系人不能为空！", //弹出框提示文字
      defaultImg_1: "/static/img/notice-cover.png", //默认图片
      number: 0, //选择的人员或部门的数量
      ispublish: false, //点击发布防止重复开关
      sureListArr:[],//用来存放选中的人员或部门的数组
      sureListArr_1:[],//处理后往后台穿的数组
    };
  },
  components: {
    "v-tipBox": tipBox
  },
  created: function() {
    // self.oid = this.$route.query.oid
    // self.uid = this.$route.query.uid
    
    if (sessionStorage.getItem("sureList")) {
      this.sureListArr = JSON.parse(sessionStorage.getItem("sureList"))
      this.number = this.sureListArr.length;
      this.sureListArr_1 = this.sureListArr.map(function(data){
        return { id: data.id, type: data.type };
      })
    }
    if(sessionStorage.getItem('imgUrl')){
      this.defaultImg_1 = sessionStorage.getItem('imgUrl')
    }
  },
  watch: {},
  methods: {
    //   点击发送范围
    sendRangeClick() {
      this.$router.push({
        path: "/linkman"
      });
    },
    // 点击发布按钮
    publish() {
      var self = this;
      if (this.number == 0) {
        this.isShowdel = true;
      } else {
        if (self.ispublish == false) {
          self.ispublish = true
          self
            .getnoticesave({
              oid:self.oid,
              uid:self.uid,
              receive:JSON.stringify(self.sureListArr_1),
              title:sessionStorage.getItem('title'),
              author:sessionStorage.getItem('author'),
              content:sessionStorage.getItem('content'),
              image:self.defaultImg_1 == '/static/img/notice-cover.png'?'https://web.botong.tech/resource/img/notice.png':self.defaultImg_1
            })
            .then(data => {
              self.ispublish = false
              if (data.code == "000000") {
                self.$router.push({
                  path: "/home"
                });
              } else {
                this.tipMessage = data.msg;
                this.isTip = true;
                setTimeout(() => {
                  this.isTip = false;
                }, 1000);
              }
            })
            .catch(msg => {
              self.ispublish = false
              this.tipMessage = "服务器错误";
              this.isTip = true;
              setTimeout(() => {
                this.isTip = false;
              }, 1000);
            });
        }
      }
    },
    // 点击确认返回
    okClick() {
      this.isShowdel = false;
    },
    // 选择图片上传
    onFileChange(e) {
      var self = this;
      var files = e.target.files || e.dataTransfer.files;
      var fileData = files[0];
      // 读取图片数据
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        // 加载图片的真实宽度和高度
        var image = new Image();
        image.onload = function() {
          self.uploadImage(files[0]);
        };
        image.src = data;
      };
      reader.readAsDataURL(fileData);
    },
    // 上传图片
    uploadImage(file) {
      Indicator.open('上传中...');
      var self = this
      var formdata = new FormData();
      formdata.append("file", file);
      self.uploadFile(formdata).then(data => {
        
        if (data.code == 200) {
          self.defaultImg_1 = data.data[0].reqUrl;
          sessionStorage.setItem('imgUrl',self.defaultImg_1)
          document.getElementById("uploadimg").value = "";
          Indicator.close();
        } else {
          self.tipMessage = '上传失败';
          Indicator.close();
          self.isTip = true;
          setTimeout(() => {
            self.isTip = false;
          }, 1000);
        }
      }).catch(msg => {
        Indicator.close();
        alert('1')
         self.tipMessage = "服务器错误";
          self.isTip = true;
          setTimeout(() => {
            self.isTip = false;
          }, 1000);
      })
    },
    // 返回上一步
    goback() {
      this.$router.push({
        path: "/addnoticeFirst"
      });
    },

    ...mapActions(["uploadFile",'getnoticesave'])
  }
};
</script>
<style scoped>
/* 删除弹框 */

.delPopup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background: rgba(126, 109, 105, 0.4);
}

.delContent {
  width: 60%;
  height: 10rem;
  background-color: #fff;
  border-radius: 10px;
  margin: calc((100vh - 10rem) / 2) auto;
  z-index: 100000;
}
/* ----------- */
.tip {
  position: fixed;
  width: 21rem;
  height: 4rem;
  background: #000;
  opacity: 0.6;
  z-index: 500;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 0.5rem;
  line-height: 4rem;
  text-align: center;
  color: #fff;
}
.angle {
  border-left: 0.3rem solid #fff;
  border-bottom: 0.3rem solid #fff;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 1.85rem;
  transform: rotate(45deg);
  float: left;
}
.header {
  height: 5rem;
  line-height: 5rem;
  color: white;
  background-color: #fd6162;
  font-weight: normal;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}
.header a {
  float: left;
  margin-left: 1rem;
}
.header > span:nth-of-type(1) {
  font-size: 1.6rem;
}
.header > span:nth-of-type(2) {
  float: right;
  margin-right: 1rem;
}
.content {
  margin-top: 5rem;
  background: #ecebf1;
  padding-top: 2rem;
  height: calc(100vh - 5rem);
}
.sendRange {
  padding: 0 1.5rem;
  background: #fff;
  height: 4rem;
  line-height: 4rem;
  color: #333333;
  overflow: hidden;
}
.sendRange div:nth-child(1) {
  float: left;
}
.sendRange div:nth-child(2) {
  float: right;
  display: flex;
  align-items: center;
}
.smallAngle {
  float: right;
  border-left: 0.2rem solid #ccc;
  border-bottom: 0.2rem solid #ccc;
  width: 1rem;
  height: 1rem;
  /* margin-top: 1.5rem; */
  transform: rotate(-135deg);
}
.numPeople {
  margin-right: 0.2rem;
}
.content > p {
  padding: 0 1.5rem;
  height: 4rem;
  line-height: 4rem;
  color: #333333;
}
.imgBox {
  padding: 1.5rem;
  background: #fff;
  position: relative;
}
.imgBox label img {
  width: 8rem;
  height: 8rem;
}
input[type = file]{
      width: 96px;
    height: 96px;
    opacity: 0;
    position: absolute;
    left: 18px;
    top: 18px;
    display: block;
}
</style>